<template>
  <div v-transfer-dom>
    <div class="footer">
      <flexbox class="menu">
        <flexbox-item class="menu-item" v-for="(menu,i) in menuList" :class="menu.path===$route.path? 'active' : ''" :key="i"
                      @click.native="changeMenu(menu)">
          <div>
            <i class="icon" :class="menu.icon"></i>
          </div>
          <span class="menu-tit">{{menu.name}}</span>
        </flexbox-item>
      </flexbox>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'footer-menu',
    data() {
      return {
        menuList: [{
          name: '消息',
          icon: 'icon-weixin1',
          path: '/'
        }, {
          name: '会务',
          icon: 'icon-shangdian',
          path: '/huiwu'
        },
          {
            name: '我的',
            icon: 'icon-user',
            path: '/user'
          }]
      }
    },
    watch: {},
    components: {},
    computed: {},
    methods: {
      changeMenu(menu) {
        this.$router.push(menu.path)
      }
    },
    created() {

    },
    mounted() {

    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/public";

  .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    border-top: 1px solid #ddd;
    line-height: normal;
    background: #fff;
    height: 1.45rem;
    .menu {
      .menu-item {
        padding: 10px 0;
        text-align: center;
        font-size: .25rem;
        color: #6c6c6c;

        .icon {
          font-size: .7rem;
        }
        &.active {
          color: @price-color;
        }
        .menu-tit {
          font-size: .25rem;
        }
      }
    }
  }
</style>
